<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
	    <meta name="_csrf" th:content="${_csrf.token}"/>
		<meta name="_csrf_header" th:content="${_csrf.headerName}"/>
        <title>定时任务管理-任务日志</title>
        
    	<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
    	<link th:href="@{/css/bootstrap-datetimepicker.min.css}" rel="stylesheet" type="text/css" />
    	<link th:href="@{/css/bootstrap-table.min.css}" rel="stylesheet" type="text/css" />
    	<script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    	<script th:src="@{/js/bootstrap.min.js}"></script>
    	<script th:src="@{/js/bootstrap-datetimepicker.min.js}"></script>
    	<script th:src="@{/js/locales/bootstrap-datetimepicker.zh-CN.js}"></script>
    	<style type="text/css">
    	body {
		  padding-top: 20px;
		  padding-bottom: 20px;
		}
		
		.navbar {
		  margin-bottom: 20px;
		}
		
		.input-clear-a {
            color: white;
        }

		.input-content:hover+ .input-clear-a {
            color: #d4d4d4;
        }
        
        .input-clear-a:hover{
            color: #d4d4d4;
        }
        
        .pull-left {
		    float: left!important;
		    margin-top: 10px;
     		margin-bottom: 10px;
		}
        .pull-right {
		    float: right!important;
		    margin-top: 10px;
     		margin-bottom: 10px;
		}
    	
    	</style>
    </head>
    <body>
    <div class="container">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="/">任务管理</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="/">任务列表</a></li>
              <li class="active"><a href="#">任务日志</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
            <li><a href="#" id="logout">登出</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>
      
      <div class="panel panel-default">
		  <div class="panel-body">
	      <form class="form-inline" method="get" action="/listLogs" id="queryForm">
	      	<input type="hidden" name="pageIndex" id="pageIndex" th:value="${1}">
	      	<input type="hidden" name="pageSize" id="pageSize" th:value="${pageSize}">
	      	 <div class="form-group">
	      	    <label for="taskId" class="control-label">定时任务</label>
		      	<select class="form-control" name="taskId" id="taskId">
		      	  <option value="">--请选择--</option>
				  <option th:each="task : ${tasks}" th:value="${task.taskId}" th:text="${task.taskName}" th:selected="${task.taskId == taskId ? 'true':'false'}"></option>
				</select>
			</div>
	      	 <div class="form-group">
	      	    <label for="taskDate" class="control-label">执行日期</label>
                <div class="input-group date form_date" data-date="" data-date-format="yyyy-mm-dd" data-link-field="taskDate" data-link-format="yyyy-mm-dd">
                    <input class="form-control" size="16" type="text" id="taskDate" name="taskDate" th:value="${taskDate}" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
					<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
	      	 </div>
	      	 <div class="form-group">
			  <button type="submit" class="btn btn-primary">查询</button>
			 </div>
	      </form>
	      </div>
      </div>
       
      <div class="panel panel-default">
		  <div class="panel-body">
		      <form class="form-inline" method="post" th:action="@{/clearLogs}" id="clearForm">
		       <div class="form-group">
	      	    <label for="clearDate" class="control-label">清理日期</label>
                <div class="input-group date form_date" data-date="" data-date-format="yyyy-mm-dd" data-link-field="clearDate" data-link-format="yyyy-mm-dd">
                    <input class="form-control" size="16" type="text" id="clearDate" name="clearDate" th:value="${clearDate}" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
					<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
	      	 </div>
	      	 <div class="form-group">
	      	  <button id="clearbutton" class="btn btn-primary">清理</button>
			 </div>
		     </form>
	      </div>
	  </div>
      
   	  <div class="panel panel-default">
	  <!-- Table -->
	  <table class="table">
	  <tr>
        <th>任务名称</th>
        <th>任务类型</th>
        <th>执行结果</th>
        <th>执行开始时间</th>
        <th>执行结束时间</th>
      </tr>
       <tr th:each="log : ${logs.content}" th:class="${log.status == '0'?'danger':''}">
       	<td th:text="${log.task.taskName}"></td>
       	<td th:text="${log.task.taskType}"></td>
       	<td th:text="${log.status=='1'?'成功':'失败'}"></td>
       	<td th:text="${log.taskBegin}"></td>
       	<td th:text="${log.taskEnd}"></td>
       </tr>
	  </table>
	  </div>
	  
	  <div class="bootstrap-table">
	
	<div class="fixed-table-pagination" >
	  <div class="pull-left pagination-detail"><span class="pagination-info">
	      共[[${logs.getTotalElements()}]]条记录
	    </span>
	    <div class="page-list">每页显示 <div class="btn-group dropdown dropup">
		    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
		      <span class="page-size">
		        [[${logs.size}]]
		      </span>
		      <span class="caret"></span>
		    </button>
		    <ul class="dropdown-menu" role="menu">
		      <li role="menuitem" th:class="${logs.size == 5}?'active'" th:onclick="changePageSize('5')"><a href="#">5</a></li>
		      <li role="menuitem" th:class="${logs.size == 10}?'active'" th:onclick="changePageSize('10')"><a href="#">10</a></li>
		      <li role="menuitem" th:class="${logs.size == 25}?'active'" th:onclick="changePageSize('25')"><a href="#">25</a></li>
		      <li role="menuitem" th:class="${logs.size == 50}?'active'" th:onclick="changePageSize('50')"><a href="#">50</a></li>
		      <li role="menuitem" th:class="${logs.size == 100}?'active'" th:onclick="changePageSize('100')"><a href="#">100</a></li>
		    </ul>
		  </div> 条
		</div>
	  </div>
	  <div class="pull-right pagination">
	  <nav aria-label="..." th:with="totalPages=${logs.totalPages==0}?1:${logs.totalPages},number=${logs.number+1}">
	    <ul class="pagination">
		    <li th:class="${logs.first}? 'disabled'">
		    <a href="#" aria-label="Previous" th:onclick="${logs.first}?'':'queryLogs('+${number-1}+')'"><span aria-hidden="true">&laquo;</span></a>
		    </li>
		    <!-- <li th:each="index : ${#numbers.sequence(1,totalPages)}" th:class="${index==number}?'active'">
			    <a href="#" th:text="${index}" th:onclick="${index==number}?'':'queryLogs('+${index}+')'">
			    <span class="sr-only" th:if="${index==number}">(current)</span>
			    </a>
		    </li> -->
		    <li th:each="flag : ${visibalePage}" th:class="${flag==number}?'active'">
			    <a href="#" th:text="${flag == -1?'...':flag}" th:onclick="${flag==number || flag == -1}?'':'queryLogs('+${flag}+')'">
			    <span class="sr-only" th:if="${flag==number || flag==-1}">(current)</span>
			    </a>
		    </li>
		    <li th:class="${logs.last}? 'disabled'">
		      <a href="#" aria-label="Next" th:onclick="${logs.last}?'':'queryLogs('+${number+1}+')'">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>
		  </ul>
		</nav>
	  </div>
	</div>
	</div>
	
    </div>
    <form th:action="@{/logout}" method="post" id="logoutForm">
    </form>
    </body>
    <script>
    
    $('.form_date').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		minView: 2,
		forceParse: 0
    });
    
    $("#logout").click(function(){
    	$("#logoutForm").submit();
    });
    
    function queryLogs(pageIndex) {
    	$("#pageIndex").val(pageIndex);
    	$("#queryForm").submit();
    }
    function changePageSize(pageSize) {
    	$("#pageSize").val(pageSize);
    	$("#queryForm").submit();
    }
    
    $("#clearbutton").click(function(){
    	if(''==$("#clearDate").val()){
    		alert('请选择清理日期');
    		return;
    	}
    	$("#clearForm").submit();
    });
    </script>
</html>
    